<template>
<div class="root">

  <div class="top">
    <div @click="ret" class="head">
      <el-icon class="el-icon"><Back /></el-icon>
      <p>返回</p>
    </div>
    <span class="span"> | </span>
    <div class="name">{{list.name}}</div>
  </div>

  <!-- form 表单 -->
  <div class="form">
    <el-space wrap>
      <el-form-item label="考生姓名">
          <el-input v-model="searchfrom.key" placeholder="考生姓名" />
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="list.region" clearable placeholder="请选择">
          <el-option label="已阅卷" value="yiyuejuan" />
          <el-option label="未阅卷" value="weiyuejuan" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门" prop="name">
          <el-cascader
            :options="options"
            :props="{ value: 'id', label: 'name', childeren: 'children' }"
            clearable
            placeholder="请选择"
          />
      </el-form-item>

      <el-form-item label="班级">
          <el-select disabled  v-model="classes" clearable placeholder="请选择">
            <el-option value="" />
          </el-select>
      </el-form-item>

      <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>

    </el-space>
  </div>


  <!-- 表格 -->
  <el-table :data="list" class="custom" >
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="classname" label="班级名称" />
    <el-table-column prop="scores" label="分数" />
    <el-table-column prop="stuEndTime" label="考试时间" />
    <el-table-column prop="state" label="状态" />
    <el-table-column label="操作" width="100" #default="scope">
      <el-button type="primary" link @click="add(scope.row)">
        {{ scope.row.qorder ? '查看' : '阅卷' }}
      </el-button>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div class="fenye">
    <FenYe :total="totals" @getChildData='getChildData'></FenYe>
  </div>


  <!-- 点击查看的侧边弹框 -->
  <el-drawer v-model="drawer" :title="dates.name+'的试卷'" size="50%">
    
    <div class="" v-for="item in msg" :key="item.id">

      <span>{{item.type}}</span>
      <span class="scores">分值：{{item.scores}}</span>
      <div v-html="item.title"></div>
      <div class="studentanswer">
        <p>回答：{{item.explains}}</p>
        <p>{{item.studentanswer}}</p>
      </div>

      <div class="annotation">
        <el-form ref="formRef" label-width="70px">
          <el-form-item label="打分">
            <el-input class="inpt" v-model="item.studentscores"/>
          </el-form-item>
          <el-form-item label="批注">
            <el-input type="textarea" v-model="item.comments" />
          </el-form-item>
        </el-form>
      </div>

    </div>

    <el-button type="primary" @click="submitForm">阅卷完毕</el-button>
    <el-button @click="drawer = false">取消</el-button>

  </el-drawer>


</div>
</template>

<script setup lang='ts'>
  import { Back } from '@element-plus/icons-vue';
  import {ref,reactive,onMounted} from 'vue'
  import router from '../../router/router'
  import { useRoute } from 'vue-router';
  import { testGet,department_list,question_listforstu,studentanswer_update } from "../../api/exam"; //接口
  import FenYe from '../../components/fen ye/FenYe.vue'
  import { ElMessage } from 'element-plus';

  // 接收跳转过来的参数
  const Route = useRoute(); //获取到值
	onMounted(() => {
      //  console.log("获取到的参数", Route.query);  //接收到的参数
   })

// 返回
const ret = () => {
  router.push({ path: './exam' });
};


// 部门数据
let options = ref([])

let getdepartment_list = async() => {
  let res = await department_list({page:1,psize:10})
  console.log(res);
  options.value = res.data.list
  
}
getdepartment_list()


// 列表数据
let list:any = ref([])
let totals:any = ref(0)  // 一共多少条数据
let searchfrom = reactive({ //参数
  testid:Route.query.isread,
  key:'',
  pageCounts:1,
  pageSize:10
})
let gettest = async() => {
  let res:any = await testGet(searchfrom)
  console.log(res)
  list.value = res.data.list
  totals.value = res.data.counts  // 一共多少条数据
}
gettest()


// 分页
const getChildData = (val:any) => {
  console.log(111, val)
  searchfrom.pageCounts = val.pageCounts
  searchfrom.pageSize = val.pageSize
  gettest()
}


// 点击查询
let search = () => {
  gettest()
}


// 查看
const drawer = ref(false); //弹窗默认关闭

// 点击查看弹出框 详情
const dates:any = reactive({name:''}); //名字
let msg:any =  ref({}); // 数据

let add = async(i:any) => {
  console.log(i)
  dates.name=i.name; // 名字
  drawer.value = true // 开启弹窗

  let res = await question_listforstu ({testid:Route.query.isread,studentid: i.id})
  console.log(res);
  msg.value = res.data.list
}


// 班级
let classes:any = ref([])

// 阅卷完毕
let submitForm = async() => {
  drawer.value = false // 关闭弹窗
  let params = msg.value.map((item:any)=>({  //参数
      answerid:item.answerid,
      scores:item.studentscores,
      comments:item.comments
  }))
  let res:any = await studentanswer_update(params)
  console.log(res);
  if(res.errCode===10000){
    ElMessage({
      message: '您已经判完卷了',
      type: 'success',
    });
  }else{
    ElMessage({
      message: '判卷失败，请重新判卷',
      type: 'error',
    });
  }
}


</script>

<style scoped lang='less'>
.top{
  display: flex;
  justify-content: flex-start;
}
.span{
  margin-left: 5px;
  margin-right: 5px;
  color: rgb(200, 192, 192);
}
.name{
  font-weight: 500;
}
.el-icon{
    margin-top: 3px;
    margin-right: 8px;
  }
  .form{
    margin-top: 20px;
  }

.fenye{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.scores{
  margin-left: 10px;
  color: #c2beb3;
}
.studentanswer{
  height: 35px;
  line-height: 35px;
}
.annotation{
  margin-top: 20px;
  margin-bottom: 30px;
}

.head{
  display: flex;
  cursor:pointer;
}

.custom{
  width: 100%
}
</style>